<template>
  <div class="account-info-box" v-loading="loading">
    <el-tabs type="border-card">
      <el-tab-pane label="账号详情">
        <div class="account-info-top">
          <img :src="detailData.gameAccountVo.imgUrl" alt="">
          <div class="info">
              <ul>
                  <li>
                      <p class="info-title">游戏昵称：</p>
                      <p class="info-con">{{ detailData.gameAccountVo.nickname }}</p>
                  </li>
                  <li>
                      <p class="info-title">账号：</p>
                      <p class="info-con">{{ detailData.gameAccountVo.accountNo }}</p>
                  </li>
                  <li>
                      <p class="info-title">当前价格：</p>
                      <p class="info-con">{{ detailData.perHourWorth }}趣宝石/小时</p>
                  </li>
                  <li>
                    <p class="info-title">账号收入（70%）：</p>
                    <p class="info-con">{{ detailData.sumIncome }}元</p>
                  </li>
                  <li>
                    <p class="info-title">平台收益（30%）：</p>
                    <p class="info-con">{{ detailData.platformIncome }}元</p>
                  </li>
                  <li>
                    <p class="info-title">出租时长：</p>
                    <p class="info-con">{{ detailData.rentHour }}</p>
                  </li>
                  <!-- <li>
                      <p class="info-title">账号收入：</p>
                      <p class="info-con">{{ item.heroSize }}</p>
                  </li>
                  <li>
                      <p class="info-title">皮肤数：</p>
                      <p class="info-con">{{ item.skinSize || 0 }}</p>
                  </li>
                  <li>
                      <p class="info-title">首次托管时间：</p>
                      <p class="info-con" v-if="item.createTime">{{ _formatDate(item.createTime) }}</p>
                      <p class="info-con" v-else>暂无托管记录</p>
                  </li> -->
              </ul>
          </div>
          <!-- <div>
              <p class="info-con" style="margin-top: 0px;">首次托管时间：{{ _formatDate(item.createTime) }}</p>
          </div> -->
      </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
  props: {
    detailData: {}
  },
  data () {
      return {
          skinWidth: '',
          isShowMore: false,
          loading: false
      }
  },
  mounted () {
  },
  methods: {
      _formatDate (timestamp) {
          return formatDate(timestamp, 'YYYY-MM-DD HH:MM')
      }
  }
}
</script>

<style lang="scss" scoped>
  .account-info-box{
    margin-top: 20px;
  }
  .account-info-top {
      display: flex;
      .info {
          flex: 1;
          margin: 0 20px;
          ul {
              display: flex;
              width: 100%;
              justify-content: space-between;
          }
          .skin-list {
              position: relative;
              display: flex;
              flex-direction: row;
              align-items: top;
              margin-top: 10px;
              .info-title {
                  line-height: 24px;
              }
          }
          .skin-list-con {
              flex: 1;
          }
          .skin-list-hidden {
              max-width: 800px;
              line-height: 24px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
          }
          .skin-list-more {
              line-height: 26px;
              font-size: 14px;
              color: #66b1ff;
              cursor: pointer;
          }
      }
      img {
          display: inline-block;
          width: 92px;
          height: 92px;
          border-radius: 50%;
      }
  }
  .account-info-bottom {
      margin-top: 10px;
  }
  .info-title {
      font-size: 12px;
      color: #9ba0b1;
      font-weight: 600;
  }
  .info-con {
      margin-top: 5px;
      font-size: 14px;
      color: #393939;
      font-weight: 500;
  }
</style>
